<template>
  <div
    class="wrapper"
    :class="{'nav_open':nav_open,'sidebar_minimize':sidebar_minimize,'topbar_open':topbar_open}"
  >
    <!-- 头部 -->
    <div
      class="main-header"
      data-background-color="purple"
      style="height:60px"
    >
      <!-- 左侧 -->
      <div
        class="logo-header"
        style="height:60px;line-height:60px"
      >
        <a
          href="index.html"
          class="logo"
        >
          <span
            class="navbar-brand"
            style="color:#fff"
          >ADMIN</span>
        </a>

        <!-- 手机端 左侧导航栏切换显示 -->
        <button
          class="navbar-toggler sidenav-toggler ml-auto"
          type="button"
          @click="nav_open = !nav_open"
        >
          <span class="navbar-toggler-icon">
            <i :class="[nav_open?'el-icon-s-fold':'el-icon-s-unfold']"></i>
          </span>
        </button>

        <!-- 手机端 顶部导航栏切换显示 -->
        <button
          class="topbar-toggler more"
          @click="topbar_open=!topbar_open"
        >
          <i class="el-icon-more"></i>
        </button>

        <!-- 电脑端 左侧导航栏切换显示 -->
        <div
          class="navbar-minimize"
          @click="sidebar_minimize = !sidebar_minimize"
        >
          <button class="btn btn-minimize btn-rounded">
            <i :class="[sidebar_minimize?'el-icon-s-fold':'el-icon-s-unfold']"></i>
          </button>
        </div>
      </div>

      <!-- 顶部右侧 -->
      <nav
        class="navbar navbar-header navbar-expand-lg"
        style="padding:0;height: 60px;"
      >
        <el-menu
          :default-active="nav_bar.active"
          style="display: flex;overflow-x: auto;margin-left:auto"
          mode="horizontal"
          @select="topSelect"
          background-color="#716aca"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item
            :index="index | num_to_string"
            v-for="(item, index) in nav_bar.list"
            :key="index"
          >{{item.name}}</el-menu-item>

          <el-submenu index="100">
            <template slot="title">
              <el-avatar
                size="small"
                src="../assets/img/profile.jpg"
              ></el-avatar>
            </template>
            <el-menu-item index="100-1">
              <i class="el-icon-message"></i>信息
            </el-menu-item>
            <el-menu-item index="100-2">
              <i class="el-icon-s-tools"></i>设置
            </el-menu-item>
            <el-menu-item index="100-3">
              <i class="el-icon-warning-outline"></i>退出
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </nav>
    </div>

    <!-- 侧边导航栏 -->
    <div class="sidebar">
      <div class="sidebar-wrapper scrollbar-inner">
        <div
          class="sidebar-content"
          style="color:#fa0"
        >
          <el-dropdown
            class="user"
            trigger="click"
            placement="top-start"
          >
            <span class="el-dropdown-link">
              <div class="avatar-sm float-left mr-2">
                <img
                  src="../assets/img/profile.jpg"
                  alt="..."
                  class="avatar-img rounded-circle"
                />
              </div>
              <div class="info">
                <a>
                  <span>
                    Hizrian
                    <span class="user-level">Administrator</span>
                    <span class="caret"></span>
                  </span>
                </a>
              </div>
            </span>
            <el-dropdown-menu
              slot="dropdown"
              style="width:220px"
            >
              <el-dropdown-item>黄金糕</el-dropdown-item>
              <el-dropdown-item>狮子头</el-dropdown-item>
              <el-dropdown-item>螺蛳粉</el-dropdown-item>
              <el-dropdown-item disabled>双皮奶</el-dropdown-item>
              <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-menu
            :default-active="slide_menu_active"
            class="nav"
            @select="slideSelect"
            :collapse="sidebar_minimize"
          >
            <el-menu-item
              :index="index | num_to_string"
              class="nav-item"
              v-for="(item, index) in slide_menu"
              :key="index"
            >
              <i :class="item.icon"></i>
              <span slot="title">{{item.name}}</span>
            </el-menu-item>
          </el-menu>
        </div>
      </div>
    </div>

    <!-- 主体 -->
    <div class="main-panel">
      <div
        class="content"
        style="margin-top:60px;min-height: calc(100% - 60px);display: flex;flex-flow: column;"
      >
        <!-- 面包屑导航条 -->
        <div
          class="border-bottom breadcrumb bg-white"
          style="padding:20px;margin-bottom:0"
          v-if="breadcrumb.length > 0"
        >
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item
              :to="{ path: item.path }"
              v-for="(item, index) in breadcrumb"
              :key="index"
            >{{item.title}}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <!-- 主体内容 -->
        <div
          class="main"
          style="flex:1;position: relative;overflow-y: auto;"
        >
          <router-view></router-view>
        </div>
      </div>
    </div>

    <!-- 设置 -->
    <div class="custom-template">
      <div class="title">Settings</div>
      <div class="custom-content">
        <div class="switcher">
          <div class="switch-block">
            <h4>Topbar</h4>
            <div class="btnSwitch">
              <button
                type="button"
                class="changeMainHeaderColor"
                data-color="blue"
              ></button>
              <button
                type="button"
                class="selected changeMainHeaderColor"
                data-color="purple"
              ></button>
              <button
                type="button"
                class="changeMainHeaderColor"
                data-color="light-blue"
              ></button>
              <button
                type="button"
                class="changeMainHeaderColor"
                data-color="green"
              ></button>
              <button
                type="button"
                class="changeMainHeaderColor"
                data-color="orange"
              ></button>
              <button
                type="button"
                class="changeMainHeaderColor"
                data-color="red"
              ></button>
            </div>
          </div>
          <div class="switch-block">
            <h4>Background</h4>
            <div class="btnSwitch">
              <button
                type="button"
                class="changeBackgroundColor"
                data-color="bg2"
              ></button>
              <button
                type="button"
                class="changeBackgroundColor selected"
                data-color="bg1"
              ></button>
              <button
                type="button"
                class="changeBackgroundColor"
                data-color="bg3"
              ></button>
            </div>
          </div>
        </div>
      </div>
      <div class="custom-toggle">
        <i class="el-icon-s-tools"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 在手机端右侧导航切换显示
      nav_open: false,
      // 电脑端右侧导航切换显示
      sidebar_minimize: false,
      // 手机端头部顶部导航切换显示
      topbar_open: false,

      // 选中顶部导航栏
      nav_bar: [],

      // 面包屑导航
      breadcrumb: []
    };
  },
  // 初始化
  created() {
    // 初始化nav_bar
    this.nav_bar = this.$conf.nav_bar;
    // 获取面包屑导航
    this.get_breadcrumb();
    // 初始化菜单
    this.init_nav_bar();
  },
  watch: {
    $route(to, from) {
      // 本地存储
      localStorage.setItem(
        "nav_active",
        JSON.stringify({
          top: this.nav_bar.active || "0",
          left: this.slide_menu_active || "0"
        })
      );
      this.get_breadcrumb();
      this.init_nav_bar();
    }
  },
  computed: {
    // 侧边栏数据
    slide_menu() {
      return this.nav_bar.list[this.nav_bar.active].sub_menu || [];
    },

    // 计算侧边栏的subActive激活状态
    slide_menu_active: {
      get() {
        return this.nav_bar.list[this.nav_bar.active].sub_active || "0";
      },
      set(val) {
        this.nav_bar.list[this.nav_bar.active].sub_active = val;
      }
    }
  },
  methods: {
    // 顶部导航动态切换,通过计算属性slideMenus计算侧边栏
    topSelect(key, keyPath) {
      if (key === "100-1") {
        console.log("信息");
        return;
      }
      if (key === "100-2") {
        console.log("设置");
        return;
      }
      if (key === "100-3") {
        console.log("退出");
        return;
      }

      if (this.nav_bar.active === key) return;
      this.nav_bar.active = key;
      this.slide_menu_active = "0"; // 每次激活侧边栏状态都为设置第一个'0' ,并跳转
      if (this.slide_menu.length > 0) {
        this.$router.push({
          name: this.slide_menu[this.slide_menu_active].pathname
        });
      }
    },

    // 动态切换侧边栏的subActive激活状态
    slideSelect(key, keyPath) {
      if (this.slide_menu_active === key) return;
      this.slide_menu_active = key;
      // 跳转页面
      this.$router.push({
        name: this.slide_menu[key].pathname
      });
    },

    // 获取面包屑导航
    get_breadcrumb() {
      let b = this.$route.matched.filter(v => v.name);
      let arr = [];
      b.forEach((v, k) => {
        // 过滤layout和index
        if (v.name === "home" || v.name === "layout") return;
        arr.push({
          name: v.name,
          path: v.path,
          title: v.meta.title
        });
      });
      if (arr.length > 0) {
        arr.unshift({
          name: "index",
          path: "/index",
          title: "后台首页"
        });
      }
      this.breadcrumb = arr;
    },
    init_nav_bar() {
      let r = localStorage.getItem("nav_active");
      if (r) {
        r = JSON.parse(r);
        this.nav_bar.active = r.top;
        this.slide_menu_active = r.left;
      }
    }
  }
};
</script>


<style lang="css">
::-webkit-scrollbar {
  width: 0.25rem;
  height: 0.25rem;
  background-image: linear-gradient(
    135deg,
    #716aca 0%,
    rgba(8, 196, 219, 0.5) 72%,
    rgba(0, 182, 234, 0.3) 100%
  );
}
::-webkit-scrollbar-track {
  border-radius: 0;
}
::-webkit-scrollbar-thumb {
  border-radius: 0;
  background-image: linear-gradient(
    135deg,
    #716aca 0%,
    #08c4db 72%,
    #057494 100%
  );
  transition: all 0.2s;
  border-radius: 0.25rem;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(95, 95, 95, 0.7);
}

.el-menu {
  border: none !important;
}
.nav.el-menu--collapse.el-menu {
  border: none !important;
  width: 75px;
}

/* 手机端,不显示面包屑导航 */
@media screen and (max-width: 991px) {
  .breadcrumb {
    display: none;
  }
}
</style>